import type { DataType } from '@antv/l7';
import { history, useParams } from '@umijs/max';
import {
  Button,
  Card,
  Col,
  message,
  Row,
  Table,
  type TableColumnsType,
  type TableProps,
} from 'antd';
import { useEffect, useState } from 'react';
import { gutter } from '@/pages/const/keys';
import { authRole, updateAuthRole } from '@/services/role';

const App = () => {
  ///system/role/auth/2
  // const roleId =
  const { id } = useParams<{ id: string }>();
  const [user, setUser] = useState<any>({});
  // const [roles, setRoles] = useState<any[]>([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<any[]>([]);
  const getData = async () => {
    const { roles, user, ...rest } = await authRole(id as any);
    console.log(roles, user, rest);
    setUser(user);
    // setRoles(roles || []);
    setSelectedRowKeys(user?.roles.map((item: { roleId: any }) => item.roleId));
    setDataSource(roles || []);
  };
  useEffect(() => {
    getData();
  }, []);
  const columns: TableColumnsType<any> | undefined = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (_: any, __: any, index: number) => index + 1,
    },
    {
      title: '角色编号',
      dataIndex: 'roleId',
      key: 'roleId',
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName',
    },
    {
      title: '权限字符',
      dataIndex: 'roleKey',
      key: 'roleKey',
    },

    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];
  const rowSelection: TableProps<DataType>['rowSelection'] = {
    selectedRowKeys,
    onChange: (selectedRowKeys: React.Key[]) => {
      setSelectedRowKeys(selectedRowKeys);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.status === '1', // Column configuration not to be checked
    }),
  };
  const submit = async () => {
    const { msg, success } = await updateAuthRole({
      userId: id as string,
      roleIds: selectedRowKeys.join(','),
    });
    if (success) {
      message.success('操作成功');
      history.push('/system/user');
    } else {
      message.error(msg);
    }
  };
  return (
    <Row gutter={[gutter, gutter]}>
      <Col span={24}>
        <Card title="基本信息">
          <Row>
            <Col span={12}>用户昵称：{user.nickName}</Col>
            <Col span={12}>登录账号：{user.userName}</Col>
          </Row>
        </Card>
      </Col>
      <Col span={24}>
        <Card title="角色信息">
          <Table
            rowKey={'roleId'}
            rowSelection={rowSelection}
            columns={columns}
            dataSource={dataSource}
          />
        </Card>
      </Col>
      <Col span={24}>
        <Row justify={'center'} gutter={[gutter, gutter]}>
          <Col>
            <Button onClick={submit} type="primary">
              提交
            </Button>
          </Col>
          <Col>
            <Button
              onClick={() => {
                // /system/user
                history.push('/system/user');
              }}
            >
              返回
            </Button>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};
export default App;
